import { computed, defineComponent } from 'vue'
import { Layout } from '@arco-design/web-vue'
import { useRouter } from 'vue-router'
import { useShopStatus } from '@/datas/use-shop-status'
import { ShopStatusEnum, ShopStatusOptions } from '@/shared'
import clsx from 'clsx'
import HeaderRight from './header-right.vue'
import { DoPut } from '@/utils/http'
const { Header: HeaderL } = Layout

const Header = defineComponent({
  setup() {
    const router = useRouter()
    const { data, mutate } = useShopStatus()

    const status = computed({
      get() {
        return data.value?.data ?? ShopStatusEnum.Disable
      },
      async set(val) {
        await DoPut(`/shop/${val}`)
        mutate()
      }
    })

    const handlerClick = () => {
      router.push('/workbench')
    }
    return () => {
      return (
        <HeaderL class="h-[60px] py-4 px-6 bg-white border-b border-gray-200 flex items-center justify-between">
          <div class="flex items-center">
            <div
              onClick={handlerClick}
              class="inline-flex items-center justify-center w-32 h-12 bg-gradient-to-r from-orange-500 to-red-500 rounded-full shadow-lg"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-utensils w-8 h-8 text-white"
              >
                <path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"></path>
                <path d="M7 2v20"></path>
                <path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"></path>
              </svg>
            </div>
            <div
              class={clsx(
                'inline-flex ml-4 items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-destructive-foreground hover:bg-destructive/80 text-white',
                {
                  'bg-red-600': status.value === ShopStatusEnum.Enable,
                  'bg-gray-600': status.value === ShopStatusEnum.Disable
                }
              )}
            >
              {ShopStatusOptions.find(item => item.value === status.value)?.label}
            </div>
          </div>
          {/* JSX 中 需要添加 .value  */}
          <HeaderRight v-model={status.value} />
        </HeaderL>
      )
    }
  }
})

export default Header
